import React, { Component } from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import "./My.css";
import axiostoken from "../../utils/axiostoken"
export default class My extends Component {
    state = {
        hidden: false,
        fullScreen: false,
        islogin: false
    };
    handleLoginClick = (params) => {
        this.props.history.push("/login")
    }
    exitClick = (params) => {
        let oauth_token = this.oauth_token;
        axiostoken.post("logout", { oauth_token }).then((res) => {
            console.log(res);
            if (res.msg === "退出成功") {
                localStorage.removeItem("oauth_token");
                this.setState({
                    islogin: false
                })
            }
        }
        )
    }

    componentDidMount() {
        this.oauth_token = localStorage.getItem("oauth_token");
        let oauth_token = this.oauth_token;
        console.log(oauth_token);
        if (oauth_token) {
            this.setState({
                islogin: true
            })
        }
    }
    render() {
        return (
            <div className="yg-my">
                {/* 我的导航条的开始 */}
                <div className="yg-my-nav">
                    <NavBar className="my-nav">我的</NavBar>
                </div>
                {/* 我的导航条的结束 */}
                {/* 我的登录的开始 */}
                <div className="yg-my-login">
                    {this.state.islogin ? <div className="yg-my-head">
                        <div className="headPicture">
                            头像
                        </div>
                        <div className="exitBtn" onClick={this.exitClick}>退出</div>
                    </div>
                        : <div className="login-btn" onClick={this.handleLoginClick}>
                            登录
                    </div>}
                </div>
                {/* 我的登录的结束 */}
                {/* 我的tab的开始 */}
                <div className="yg-my-tab">
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor="#33A3F4"
                        barTintColor="white"
                        hidden={this.state.hidden}
                        tabBarPosition="top"
                        noRenderContent="false"
                    >
                        <TabBar.Item
                            title="待收款"
                            key="ForCollection"
                            icon={
                                <i className="iconfont icondaishoukuan"></i>
                            }
                            badge={1}
                            onPress={() => {
                                this.setState({
                                });
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont icondaishouhuo"></i>
                            }
                            title="待收货"
                            key="waitForReceiving "
                            badge={'2'}
                            onPress={() => {

                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont icontuihuo"></i>
                            }
                            title="退货/退款"
                            key="return"
                            onPress={() => {

                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont iconquanbudingdan"></i>
                            }
                            title="全部订单"
                            key="order"
                            onPress={() => {

                            }}
                        >
                        </TabBar.Item>
                    </TabBar>
                </div>
                {/* 我的tab的结束 */}
                <div className="yg-my-content">
                    <div className="content-list">
                        <div className="content-list-item">
                            <div className="item-left">
                                <i className="iconfont iconshoucang1"></i>
                                <span>我的收藏</span>
                            </div>
                            <div className="item-right">
                                <span></span>
                            </div>
                        </div>
                        <div className="content-list-item">
                            <div className="item-left">
                                <i className="iconfont iconlianxikefu"></i>
                                <span>联系客服</span>
                            </div>
                            <div className="item-right">
                                <span>400-618-4000</span>
                            </div>
                        </div>
                        <div className="content-list-item">
                            <div className="item-left">
                                <i className="iconfont iconyijianfankui"></i>
                                <span>意见反馈</span>
                            </div>
                            <div className="item-right">
                            </div>
                        </div>
                        <div className="content-list-item">
                            <div className="item-left">
                                <i className="iconfont iconshezhi1"></i>
                                <span>设置</span>
                            </div>
                            <div className="item-right">
                            </div>
                        </div>
                        <div className="content-list-item">

                            <div className="item-left">
                                <i className="iconfont icondangqianbanben"></i>
                                <span>当期版本</span>
                            </div>
                            <div className="item-right">
                                <span>v4.1.1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
